import { Meta, Subtitle } from '@storybook/addon-docs';
import { Typeset } from '@wingsuit-designsystem/storybook';
const tailwindFile = require('../../config/silo/tailwind.json');
const fontFamilies = tailwindFile.tailwind.theme.fontFamily;
const intFontSizes = tailwindFile.tailwind.theme.fontSize;
const fontSizes = {}
Object.keys(intFontSizes).forEach((key)=>{
  fontSizes[key] = [intFontSizes[key][0]]
})

<Meta title="Tokens/Typography"
parameters={{ viewMode: 'docs', previewTabs: { canvas: { hidden: true }}}}
/>

# Typography
<Subtitle>Choosed typefaces and font sizes</Subtitle>

<div>
{
  Object.keys(fontFamilies).map((key,i)=>{
    return (
      <div key={key}>
        <Subtitle><b>Font Family:</b> {fontFamilies[key][0]} ({key})</Subtitle>
        <Typeset fontFamily={fontFamilies[key][0]} classNamePrefix="text-" fontSizes={fontSizes} />
      </div>
    )
  })
}
</div>
